<%@ page language="java"  pageEncoding="UTF-8" errorPage="../error.jsp"%>
<%-- <%@ taglib prefix="s" uri="/struts-tags" %> --%>
<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%>
<%
	pageContext.setAttribute("ctx", request.getContextPath());	
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link rel="stylesheet"  type="text/css" href="${ctx}/css/default.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/js/jqueryeasyui12/themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/js/jqueryeasyui12/themes/icon.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jqueryeasyui12/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jqueryeasyui12/locale/easyui-lang-zh_TW.js"></script>
   <script type="text/javascript" src="${ctx}/js/ipebg/IPEBG.js"></script>
<script type="text/javascript" src="${ctx}/js/ipebg/IPEBG.js"></script>
<script type="text/javascript" src="${ctx}/js/ipebg/COMMON.js"></script>
<script type="text/javascript">
    var ctx = '${ctx}';
    jQuery(document).ready(function(){
        $("table[id=tableShow]").show();
		$('#qryGrid').datagrid({
			title:'菜單列表',
			nowrap: false,
			striped: true,
			fitColumns: true,
			url: ctx + '/function.do?action=list',
			remoteSort: false,
			//idField:'typeCode',
			singleSelect:true,
			rownumbers:true,
			frozenColumns:[[
			    {field:'ck',checkbox:true,width:30} 
			]],
			columns:[[
				{field:'functionId',title:'Id',width:50,hidden: true},	
				{field:'parentId',title:'parentId',width:100,hidden: true},
				{field:'functionName',title:'菜單名稱',width:100},
				{field:'functionCode',title:'菜單代碼',width:100},		
				{field:'parentName',title:'上級菜單',width:100,
			    	formatter:function(value,rowdata,index) {
			    		if(value=='') {
			    			return "<font color='red'>根菜單</font>";
			    		}else
			    			return value;
			    	}},		
			    {field:'functionUrl',title:'菜單鏈接',width:250},
			    {field:'description',title:'描述',width:100},
				{field:'createdTime',title:'創建時間',width:100}	
			]],
			pagination:true,
			pageSize:10,
			pageNumber:1,
			pageList:[10,20,30],
			onSelect:select
		});
		var p = $('#qryGrid').datagrid('getPager');
		if (p){
			$(p).pagination({
				onBeforeRefresh:function(){
					;
				}
			});
		}
		
		$('#submit').click(function() {
			var validationResult = $("#addForm").form('validate');
	       	if(validationResult==false){
	       		$.messager.alert('系統提示','請輸入必填信息!','warning');
	       		return;
	       	}
		    $.messager.confirm('系統提示', '您確定需要提交嗎?', function(r) {
	            if (r) {	
	              	var method = $.trim($("#method").val());
	               	if(method=='add'){	          	
	               		$.post(ctx +'/function.do?action=add',$("#addForm").serializeArray(),function(data){
	                    	if(data == "success"){
	                    		$("#optionWin").window('close');
	     	                    $.messager.alert('系統提示','新增成功!','info');
	                    		$('#qryGrid').datagrid('reload');
	                    	}else if(data == "exsit"){
	                    		$.messager.alert('系統提示','菜單代碼已存在，請重新輸入!','info');
	                    	}else{
	                    		$.messager.alert('系統提示','新增失敗!','info');
	                    	}
	                    });
	               	} else if(method=='edit'){
	               		$.post(ctx +'/function.do?action=edit',$("#addForm").serializeArray(),function(data){
	                    	if(data == "success"){
	                    		$("#optionWin").window('close');
	     	                    $.messager.alert('系統提示','修改成功!','info');
	                    		$('#qryGrid').datagrid('reload');
	                    	}else if(data == "exsit"){
	                    		$.messager.alert('系統提示','菜單代碼已存在，請重新輸入!','info');
	                    	}else{
	                    		$.messager.alert('系統提示','新增失敗!','info');
	                    	}
	                    });
	               }
	     	    }
			});
		    
		});
		//取消保存-------------------------
		$('#cancel').click(function() {
	    	$('#method').val('');
	   	    $("#optionWin").window('close');
	    });
		//菜單按鈕保存
		$('#optionSubmit').click(function() {
			var validationResult = $("#addBtnForm").form('validate');
	       	if(validationResult==false){
	       		$.messager.alert('系統提示','請輸入必填信息!','warning');
	       		return;
	       	}
		    $.messager.confirm('系統提示', '您確定需要提交嗎?', function(r) {
	            if (r) {
					$.post(ctx +'/functionoption.do?action=add',$("#addBtnForm").serializeArray(),function(data){
	                   	if(data == "success"){
	                   		$("#optionBtnWin").window('close');
	     	                $.messager.alert('系統提示','新增成功!','info');
	                   		$('#qryGridOption').datagrid('reload');
	                   	}else{
	                   		$.messager.alert('系統提示','新增失敗!','info');
	                   	}
	                });
	     	    }
			});
		    
		});
		//取消保存-------------------------
		$('#optionCancel').click(function() {
	   	    $("#optionBtnWin").window('close');
	    });
	});
    
    function select(){
		var selected = $('#qryGrid').datagrid('getSelected');
		if(selected){
			var code = selected.functionCode;
			if(code.length >= "4"){
				$("#functionOptionWin").show();
				var params = {"functionId" :  selected.functionId};
			    $("table[id=tableOptionShow]").show();
				$('#qryGridOption').datagrid({
					title:'菜單頁面按鈕列表',
					nowrap: false,
					striped: true,
					fitColumns: true,
					url: ctx + '/functionoption.do?action=list',
					remoteSort: false,
					queryParams:params,
					//idField:'typeCode',
					singleSelect:true,
					rownumbers:true,
					frozenColumns:[[
					    {field:'ck',checkbox:true,width:30} 
					]],
					columns:[[
						{field:'functionId',title:'Id',width:50,hidden: true},
						{field:'optionDsc',title:'按鈕名稱',width:100},
						{field:'optionId',title:'按鈕編碼',width:100}
					]]
				});
			}else{
				 $("#functionOptionWin").hide();
			}
		}
	}
		
	//打開增加信息窗口 	        
	function addRowOpen(){
		var optionWin = $("#optionWin");
		if (optionWin.is(':visible')){
			;
		}else{
			optionWin.slideDown();//显示 
		}
		optionWin.find("input").val("");
		optionWin.find("textarea").val("");
		$('#method').val('add');
		optionWin.window('open');
	}
		
	//打開編輯窗口方法
	function editRowOpen(){
		var selected = $('#qryGrid').datagrid('getSelected');
		if(selected){			
			var optionWin = $("#optionWin");
							
			if (optionWin.is(':visible')){
			    ;
			}else{
				optionWin.slideDown();//显示 
			}					   
			$('#method').val('edit');
			optionWin.find("#functionId").val(selected.functionId);
			optionWin.find("#functionName").val(selected.functionName);
			optionWin.find("#parentId").val(selected.parentId);
			optionWin.find("#parentName").val(selected.parentName);
			optionWin.find("#functionCode").val(selected.functionCode);
			optionWin.find("#functionUrl").val(selected.functionUrl);
			optionWin.find("#description").val(selected.description);
			optionWin.window('open');
		}else{
			$.messager.alert('系統提示','請先選擇一筆資料再進行修改!','info');
		}
	} 
	 
	//獲取上級菜單方法
	function getParent(){
		var optionWin = $("#parentWin");
		if (optionWin.is(':visible')){
			;
		}else{
		    optionWin.slideDown();//显示
		}

		var dourl = ctx+'/function.do?action=treelist';
       	$('#functionTree').tree({    
    		url: dourl,
    		lines:true,
    		loadFilter: function(data){   
    			return data.data;      
    		}     
    	}); 
	 
		optionWin.window('open');
	}
	//設置無上級菜單方法
	function setNullParent(){
		$("#parentId").val("00");
		$("#parentName").val("根菜單 -- 00");
	}
	//選擇上級菜單項
    function parentSelect(){
       var a = $('#functionTree').tree("getSelected");
       if(a!=null){
    	   var tmp = a.text;
    	   var code = tmp.split(" -- ")[1];
    	   if(code.length == 6){
    		   $.messager.alert('系統提示','不能選擇三級菜單!','info');
    	   }else{
    		   $("#parentId").val(a.id);
    	       $("#parentName").val(a.text);
    	       $("#parentWin").window('close');
    	   }
       }else{
    	   $.messager.alert('系統提示','請選擇上級菜單!','info');
          return false;
       }
    }
		 
	//刪除一行數據方法
	function deleteRow(){
		var selected = $('#qryGrid').datagrid('getSelected');
		if(selected){
			var index = $('#qryGrid').datagrid('getRowIndex', selected);
			var functionId = selected.functionId;				
			$.messager.confirm('系統提示', '您確定要刪除該記錄嗎?', function(r) {
	        	 if (r) {
	            	var params = {
						"functionId" : functionId
					};
					var actionUrl = ctx + '/function.do?action=delete';							
					$.ajax({
						type: "post",
						url : actionUrl,
						data : params,					
						dataType : "text",
						cache : false,
						error : function(textStatus, errorThrown) {
							$.messager.alert('系統提示','系統錯誤(' + textStatus + '): '+errorThrown,'error');
						},
						success : function(data, textStatus) {															
							if(data == 'success'){
								$.messager.alert('系統提示','刪除成功！','info');
								$('#qryGrid').datagrid('deleteRow', index);				
							}else if(data == 'used'){									
								$.messager.alert('系統提示','當前菜單已被使用，不可刪除！','info');
							}else{					
								$.messager.alert('系統提示','刪除失敗！','info');
							}
						}
					});
	        	}
	        });
		}else{
			$.messager.alert('系統提示','請先選擇一筆資料再進行刪除!','info');
		}
	}
		
	//查詢方法
	function query(){
		var functionName= $("#s_functionName").val();
		var functionCode= $("#s_functionCode").val();
		var param = {
			"functionCode" : functionCode,
			"functionName" : functionName
		};	
		$('#qryGrid').datagrid('load',param);	
	}
	
	//打開增加按鈕信息窗口 	        
	function addOptionOpen(){
		var selected = $('#qryGrid').datagrid('getSelected');
		if(selected){			
			var optionWin = $("#optionBtnWin");
							
			if (optionWin.is(':visible')){
			    ;
			}else{
				optionWin.slideDown();//显示 
			}
			optionWin.find("input").val("");
			optionWin.find("#option_functionId").val(selected.functionId);
			optionWin.window('open');
		}
	}
	
	//刪除按鈕信息方法
	function deleteOption(){
		var selected = $('#qryGridOption').datagrid('getSelected');
		if(selected){
			var index = $('#qryGridOption').datagrid('getRowIndex', selected);
			var functionId = selected.functionId;
			var optionId = selected.optionId;
			$.messager.confirm('系統提示', '您確定要刪除該記錄嗎?', function(r) {
	        	 if (r) {
	            	var params = {
						"functionId" : functionId,
						"optionId" : optionId
					};
					var actionUrl = ctx + '/functionoption.do?action=delete';							
					$.ajax({
						type: "post",
						url : actionUrl,
						data : params,					
						dataType : "text",
						cache : false,
						error : function(textStatus, errorThrown) {
							$.messager.alert('系統提示','系統錯誤(' + textStatus + '): '+errorThrown,'error');
						},
						success : function(data, textStatus) {															
							if(data == 'success'){
								$.messager.alert('系統提示','刪除成功！','info');
								$('#qryGridOption').datagrid('deleteRow', index);				
							}else if(data == 'used'){									
								$.messager.alert('系統提示','當前菜單的按鈕已被使用，不可刪除！','info');
							}else{				
								$.messager.alert('系統提示','刪除失敗！','info');
							}
						}
					});
	        	}
	        });
		}else{
			$.messager.alert('系統提示','請先選擇一筆資料再進行刪除!','info');
		}
	}
</script>
</head> 
<body>    
    <div style="width:99%">
	    <table id="qryGrid" toolbar="#tb"></table>
		<div id="tb">
			<form action="" id="tbFormId" style="margin-top:10px;margin-bottom:10px;">
				<table width="100%" id="tableShow" style="display:none;">
					<tr>
						<td width="60%" style="white-space:nowrap;">
							<a href="#" id="btnadd" class="easyui-linkbutton" iconCls="icon-add" plain="true" code="ADD" onclick="addRowOpen()">新增</a>
							<a href="#" id="btnedit" class="easyui-linkbutton" iconCls="icon-edit" plain="true" code="EDIT" onclick="editRowOpen()">修改</a>
							<a href="#" id="btncut" class="easyui-linkbutton" iconCls="icon-remove" plain="true" code="DELETE" onclick="deleteRow()">刪除</a>
						</td>
						<td width="40%" style="white-space:nowrap;padding:0px" align="right">
							<span style="font-size:13px;">菜單名稱:</span>
							<input type="text" id = "s_functionName" name="functionName"/>
											
							<span style="font-size:13px;">菜單代碼:</span>
							<input type="text" id = "s_functionCode" name="functionCode"/>
							<a class="easyui-linkbutton" iconCls="icon-search" plain="true" href="#" code="QUERY" onclick="query()">查詢</a>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<br/>
	</div>
	<div id="functionOptionWin" style="width:99%">
		<table id="qryGridOption" toolbar="#tbOption"></table>
		<div id="tbOption">
			<form action="" id="tbFormOptionId" style="margin:0px;margin-bottom:10px;">
				<table width="100%" id="tableOptionShow" style="display:none;">
					<tr>
						<td width="60%" style="white-space:nowrap;">
							<a href="#" id="btnadd" class="easyui-linkbutton" iconCls="icon-add" plain="true" code="ButtonAdd" onclick="addOptionOpen()">新增</a>
							<a href="#" id="btncut" class="easyui-linkbutton" iconCls="icon-remove" plain="true" code="ButtonDelete" onclick="deleteOption()">刪除</a>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	
	<div id="optionWin" class="easyui-window" title="菜單信息維護" closed="true" modal="true" 
	     collapsible="false" minimizable="false" maximizable="false" draggable="true" resizable="false"
	     style="width:600px;height:350px;padding:5px;left:60px;top:50px;background: #fafafa;display:none" align="center">		
		<form id="addForm" name="addForm" action="" method="post">			
			<input type="hidden" id="functionId" name="functionId"/>
			<input type="hidden" id="method"/>
        	<table class="formTbl" style="font-size:13px">
        	 	<tr>
					<th align="right" style="width:65px">菜單名稱:</th>
					<td>
					    <input type="text" id="functionName" name="functionName" class="easyui-validatebox" style="width:450px;" required="true" >
					    <font color="red">*</font>
					</td>
				</tr>
				<tr>
					<th align="right">上級菜單:</th>
					<td>
						<input type="hidden" id="parentId" name="parentId">
					    <input type="text" id="parentName" style="width:275px;" class="easyui-validatebox"  required="true" readOnly="readonly">
					    <a class="easyui-linkbutton" iconCls="icon-search" plain="true" href="#" onclick="getParent()">選擇</a>
					    <a class="easyui-linkbutton" iconCls="icon-filter" plain="true" href="#" onclick="setNullParent()">設為無上級菜單</a>				 
					    <font color="red">*</font>
					</td>
				</tr>
				<tr>
					<th align="right">菜單代碼:</th>
					<td>
					    <input type="text" id="functionCode" name="functionCode" style="width:450px;" class="easyui-validatebox"  required="true" >				 
					    <font color="red">*</font>
					</td>
				</tr>
				<tr>
					<th align="right">菜單鏈接:</th>
					<td>
					    <input type="text" id="functionUrl" name="functionUrl" style="width:450px;" class="easyui-validatebox" >				 
					</td>
				</tr> 
				<tr>
					<th align="right">描述:</th>
					<td>
						<textarea rows="4" style="width:90%;" id="description" name="description" validType="maxLength[150]"></textarea>									
					</td>
				</tr>			
			</table>	
			<br>			
			<div style="padding:5px;text-align:center;">
				<a id="submit" href="#" class="easyui-linkbutton" icon="icon-ok">保存</a>
				&nbsp;&nbsp;&nbsp;
				<a id="cancel" href="#" class="easyui-linkbutton" icon="icon-cancel">取消</a>
			</div>
		</form>
	</div>
	
	<div id="optionBtnWin" class="easyui-window" title="菜單按鈕信息維護" closed="true" modal="true" 
	     collapsible="false" minimizable="false" maximizable="false" draggable="true" resizable="false"
	     style="width:350px;height:200px;padding:5px;left:60px;top:50px;background: #fafafa;display:none" align="center">		
		<form id="addBtnForm" name="addBtnForm" action="" method="post">			
			<input type="hidden" id="option_functionId" name="functionId"/>
        	<table class="formTbl" style="font-size:13px">
        	 	<tr>
					<th align="right" style="width:80px;height:26px;">按鈕名稱 <font color="red">*</font>:</th>
					<td>
					    <input type="text" id="optionName" name="optionName" class="easyui-validatebox" style="width:200px;height:26px;" required="true" >
					   
					</td>
				</tr>
				<tr>
					<th align="right"  style="width:80px;">按鈕代碼 <font color="red">*</font>:</th>
					<td>
					    <input type="text" id="optionCode" name="optionCode" style="width:200px;height:26px;" class="easyui-validatebox"  required="true" >
					    </td>
				</tr>
			</table>	
			<br>			
			<div style="padding:5px;text-align:center;">
				<a id="optionSubmit" href="#" class="easyui-linkbutton" icon="icon-ok">保存</a>
				&nbsp;&nbsp;&nbsp;
				<a id="optionCancel" href="#" class="easyui-linkbutton" icon="icon-cancel">取消</a>
			</div>
		</form>
	</div>  
	
	<div id="parentWin" class="easyui-window" title="上級菜單項選擇" closed="true" modal="true" 
	     collapsible="false" minimizable="false" maximizable="false" draggable="true" resizable="false"
	     style="width:300px;height:460px;padding:5px;left:500px;top:80px;background: #fafafa;display:none;overflow-x:auto;overflow-y:auto" align="left">
		
		<form id="editForm1" name="editForm1" action="" method="post">			
			<div style="padding-left:10px">  
               <ul id="functionTree"></ul>
            </div>
            <div style="margin-right:5px;padding:5px;text-align:center;">
				<a href="#" class="easyui-linkbutton" style="margin-right:5px;" icon="icon-ok" onclick="parentSelect()">確定</a>
			</div>
		</form>
	</div>
  </body>
</html>